<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->

    <title>账号与安全</title>
    <style>

        .acc-sec-tz {
            padding: 0 0.32rem 0 0.32rem;
            background-color: white;
        }

        .acc-sec-ts {
            padding: 0.36rem 0.32rem 0.2rem 0.32rem;
            color: rgba(34, 34, 34, 0.6);
        }

        .acc-sec-wrap {
            background-color: white;
            padding: 0 0.32rem;
            color: #222222;
            margin-top: 0.16rem;
        }

        .acc-sec-item {
            padding: 0.36rem 0 0.34rem 0;
            border-bottom: 1px solid #F2F2F2;
        }

        .acc-sec-bd {
            color: rgba(34, 34, 34, 0.45);
        }

        .acc-sec-switch {
            width: 0.92rem;
            /*height:0.58rem;*/
        }


        .acc-sec-checkbox {
            display: none;
        }

        .acc-sec-label {
            position: relative;
            display: block;
            padding: 1px;
            border-radius: 0.48rem;
            height: 0.44rem;
            background-color: white;
            cursor: pointer;
            vertical-align: top;
            -webkit-user-select: none;
        }

        .acc-sec-label:before {
            content: '';
            display: block;
            border-radius: 0.48rem;
            height: 0.44rem;
            background-color: #D8D8D8;
            -webkit-transform: scale(1, 1);
            -webkit-transition: all 0.3s ease;
        }

        .acc-sec-label:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -0.2rem;
            margin-left: -0.22rem;
            width: 0.44rem;
            height: 0.42rem;
            border-radius: 0.44rem;
            background-color: white;
            box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
            -webkit-transform: translateX(-0.18rem);
            -webkit-transition: all 0.3s ease;
        }

        .acc-sec-checkbox:checked ~ .acc-sec-label:after {
            -webkit-transform: translateX(0.2rem);
        }

        .acc-sec-checkbox:checked ~ .acc-sec-label:before {
            background-color: #2C68FF;
        }

        .acc-sec-phone {
            color: rgba(34, 34, 34, 0.45);
        }

        .acc-sec-fh {
            color: rgba(153, 153, 153, 0.6);
        }

    </style>
</head>
<body>

<div class="flex-column h-100-p ff400">
    <!--状态栏-->
    <div class="placeholder-top flex-column bg-white">
        <!--状态栏-->
        <div class="status-bar"></div>
        <!--标题栏-->
        <div class="nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">账号与安全</div>
            <div class="right-bar">
            </div>
        </div>
    </div>
    <div class="flex-1">
        <div class="acc-sec-wrap fs15">
            <div class="acc-sec-item align-items-center flex-row justify-content-between" onclick="jumpPage(0)">
                <div>手机号</div>
                <div class="fs13 flex-row align-items-center">
                    <span class="acc-sec-phone"></span>
                    <span class="acc-sec-fh iconfont iconfanhui fs9 ml5"></span>
                </div>
            </div>

            <div class="acc-sec-item align-items-center flex-row justify-content-between" onclick="jumpPage(1)" style="border: none">
                <div>设置密码</div>
                <div class="fs13 flex-row align-items-center">
                    <span class="acc-sec-fh iconfont iconfanhui fs9 ml5"></span>
                </div>
            </div>

        </div>

        <div class="acc-sec-ts fs13">
            第三方账号绑定
        </div>
        <div class="acc-sec-tz">
            <div class="acc-sec-item flex-row justify-content-between align-items-center" style="border: none">
                <div>微信</div>
                <div class="flex-row align-items-center">
                    <span class="acc-sec-bd fs13 mr10">敬请期待</span>
                    <!--<div class="acc-sec-switch">-->
                    <!--    <div class="acc-sec-con">-->
                    <!--        <input id="checked_2" type="checkbox" class="acc-sec-checkbox"/>-->
                    <!--        <label for="checked_2" class="acc-sec-label"></label>-->
                    <!--    </div>-->
                    <!--</div>-->

                    <!--<span class="acc-sec-fh iconfont iconfanhui fs9 ml5"></span>-->

                </div>

            </div>
        </div>

    </div>

</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>


<script>
  let pm = {
    pageNum: 1,
    pageSize: 10,
    isScroll: true,
    title: '',
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    getAppUserInfo()
  }

  function startPage(){
    getAppUserInfo()
  }

  function reLoadPage() {
    getAppUserInfo()
  }

  function getAppUserInfo() {
    Server.changePassword.getAppUserInfo({}).then(data => {
      let reg = /^(\d{3})\d{4}(\d{4})$/
      $('.acc-sec-phone').html(data.userInfo.mobile.replace(reg, '$1****$2'))
    })
  }

  function jumpPage(num) {
    switch (num) {
    case 0:  //更换手机号
      jsBridge.openWindow('html/user/change-phone.html', {}, {noBar: false})
      break
    case 1:  //修改密码
      jsBridge.openWindow('html/user/change-password.html', {}, {noBar: false})
      break
    }
  }

</script>
</html>
